<html lang="en" xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="layout :: common_header(~{::title},~{},~{::style})">
<title>用户详情</title>
<style>
    #tblUser tr td:nth-child(odd) {
        font-weight: bold;
    }
    #tblUser tr td:nth-child(even) {
        /*background-color: #fff;*/
        font-size: 14px;
    }
</style>
</head>
<body>
<div class="easyui-layout" style="width:100%;height:100%;">
<div class="easyui-layout" style="width:100%;height:100%;">
    <div data-options="region:'north',collapsed:false" style="height:120px;">
        <table id="tblUser" class="table table-bordered table-form">
            <tr>
                <td>用户名：</td>
                <td>[[${Model.UserName}]]</td>
                <td>姓名：</td>
                <td>[[${Model.DisplayName}]]</td>
                <td>邮箱：</td>
                <td>[[${Model.Email}]]</td>
            </tr>
            <tr>
                <td>手机：</td>
                <td>[[${Model.PhoneNumber}]]</td>
                <td>QQ：</td>
                <td>[[${Model.ContactQQ}]]</td>
                <td>座机：</td>
                <td>[[${Model.Telephone}]]</td>
            </tr>
            <tr>
                <td>所属部门：</td>
                <td>[[${Model.UserOrgNames}]]</td>
                <td>所属角色：</td>
                <td colspan="3">[[${Model.UserRoleNames}]]</td>
            </tr>
        </table>
    </div>
    <div data-options="region:'west',split:false,collapsed:false" title="角色下的菜单" style="width: 300px;">
        <table id="dgMenu"></table>
    </div>
    <div data-options="region:'center',split:false,collapsed:false" title="角色下的权限">
        <table id="dgPermission"></table>
    </div>

</div>
</div>

<th:block th:replace="layout :: scripts"/>
<script th:inline="javascript" type="text/javascript">
    $(function () {
        InitMenuTree();

        InitPermissionTree();
    });
    let roleIds = [[${roleIds}]].replace(new RegExp('&quot;', "gm"),'"');
    let menuDataUrl = '/User/GetUserMenusByRoleIds';
    function InitMenuTree() {
        let postdata = JSON.parse(roleIds);
        let $dataGrid = $('#dgMenu').tree({
            url: menuDataUrl,
            queryParams : {
                'roleIds' : postdata
            },
            method: 'post',
            idField: 'id',
            treeField: 'text',
            striped: true,
            pagination: false,
            fitColumns: false,
            rowNumbers: true,
            singleSelect: true,
            nowrap: false,
            fit: true,
            lines: true,
            showFooter: false,
            checkbox: false,
            checkOnSelect: false,
            cascadeCheck: false,
            columns: [
                [
                    { field: 'text', title: '名称', width: '34%', align: 'left' },
                    { field: 'level', title: '等级', width: '19%', align: 'left' },
                    { field: 'description', title: '描述', width: '45%', align: 'left' }
                ]],
            onBeforeLoad: function(param) {
            },
            onLoadSuccess: function(data) {
                //$dataGrid.datagrid("fixRowHeight");
            },
            onLoadError: function() {
            }
        });
    }

    let permissionDataUrl = '/User/GetUserPermissionsByRoleIds';
    function InitPermissionTree() {
        let postdata = JSON.parse(roleIds);
        let $dataGrid = $('#dgPermission').treegrid({
            url: permissionDataUrl,
            queryParams : {
                'roleIds' : postdata
            },
            method: 'post',
            idField: 'id',
            treeField: 'text',
            striped: true,
            pagination: false,
            fitColumns: false,
            rowNumbers: true,
            singleSelect: true,
            nowrap: false,
            fit: true,
            lines: true,
            showFooter: false,
            checkbox: false,
            checkOnSelect: false,
            cascadeCheck: false,
            columns: [
                [
                    { field: 'text', title: '名称', width: '34%', align: 'left' },
                    { field: 'level', title: '等级', width: '19%', align: 'left' },
                    { field: 'description', title: '描述', width: '45%', align: 'left' }
                ]],
            onBeforeLoad: function(param) {
            },
            onLoadSuccess: function(data) {
                //$dataGrid.datagrid("fixRowHeight");
            },
            onLoadError: function() {
            }
        });
    }
</script>
</body>
</html>